<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>On line chat</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        var socket;
        function openSocket() {
            if (typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");
                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接,注意协议为ws
                var userName = $("#userName").val();
                var socketUrl = "ws://192.168.0.100:8080/ws_api/chat?rand=123&userName=" + userName;
                console.log(socketUrl);
                if (socket != null) {
                    socket.close();
                    socket = null;
                }
                socket = new WebSocket(socketUrl);
                console.log(socket);
                //打开事件
                socket.onopen = function (event) {
                    console.log("websocket已打开");
                };
                //获得消息事件
                socket.onmessage = function (event) {
                    console.log(event);
                    var prefix = "@INITIALIZATION@";
                    var pos = event.data.indexOf(prefix);

                     $("#content").append(event.data + "</br>")
                     /*
                    if(pos !== -1) {
                       $("#content").html(event.data.substring(prefix.length) + "</br>")
                    } else {
                        $("#content").append(event.data + "</br>")
                    }*/


                };
                //关闭事件
                socket.onclose = function (msg) {
                    $("#msg").append("</br>")
                    $("#msg").append(msg.data)
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function (msg) {
                    $("#msg").append("</br>")
                    $("#msg").append(msg.data)
                    console.log("websocket发生了错误");
                }
            }
        }

        function sendMessage() {
        if (typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            var mess = $("#message").val();
            console.log("mess=" + mess);
            socket.send(mess);
        }
    }

    </script>
</head>
<body>

</div>
<div style="margin-top: 10px;"><label style="width: 40px; ">User name:</label>
    <input id="userName" type="text" style="width:180px;height:22px" placeholder="Please input your English name."/>
    <button onclick="openSocket()">Start chat</button>&nbsp;
</div>

<div style="margin-top: 10px;"><label style="width: 40px;">Message:</label>
    <textarea id="message" cols="50", rows="4" ></textarea>
    <button onclick="sendMessage()">Send</button>
</div>

<div style="margin-top: 10px;"><label style="width: 40px;">Content:</label>
    <div id="content" style="margin-left: 20px;padding:5px;border: 1px black solid; width: 400px; height: 300px">

    </div>
</div>

</body>
</html>